<template>
    <li class="play-list-card" @click="$router.push({ path: '/PlayList', query: {id: item.id}})">
       <div class="thumb">
           <img :src="`${item.picUrl}?imageView=1&type=webp&thumbnail=247x0`" alt="">
           <span>{{item.playCount | parsePlayCount}}</span>
       </div>
       <h5>{{item.name}}</h5>
    </li>
</template>

<script>
export default {
    props: {
        item: Object,
    },
     filters: {
    parsePlayCount: function (value) {
      return (value / 10000).toFixed(1) + "万";
    },
  },
}
</script>

<style lang="less">
   .play-list-card{
    flex-basis: 30%;
    flex-grow: 1;
    list-style: none; 
   &:nth-child(3n + 2) {
    margin: 0 5px;
  }.thumb {
    position: relative;
   
  }
      img{
        width: 100%;
        padding: 6px 0;
        // vertical-align: middle;
     }
     span {
      position: absolute;
      top: 5px;
      right: 5px;
      color: white;
      padding-left: 13px;
      font-size: 12px;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
      background: url("../assets/er.svg") no-repeat;
      background-position: 0;
      background-size: 11px 10px;
    }
   }
  h5{
      padding: 0 5px;
      margin: 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-weight: 500;
      line-height: 1.2;
      font-size: 13px
  }
</style>
